<template>
    <el-dialog
            :modal-append-to-body="false"
            :key="openRefresh"
            :width="width"
            :title="title"
            :custom-class="'common-dialog-wrap '+customClass"
            :visible.sync="dialogVisible"
            @closed="closed"
    >
            <slot name="content" >
            </slot>
        <div slot="footer" class="dialog-footer">
            <slot name="footer">
            </slot>

<!--            <el-button @click="outerVisible = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>-->
        </div>

    </el-dialog>
</template>

<script>
export default {
    components: {},
    props: {
        customClass : {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            openRefresh: new Date() + '',
            width: '',
            dialogVisible: false,
            title: ''
        }
    },
    computed: {},
    mounted() {

    },
    watch: {},
    methods: {
        closed () {
            this.$emit('closed')
        },
        close(){
            this.dialogVisible= false
        },
        open(params){
            if(params.title){
                this.title= params.title
            }
            if(params.width){
                this.width= params.width
            }
            this.openRefresh = new Date() + ''
            this.dialogVisible= true
        }
    }
}

</script>
<style lang='stylus'>
    .common-dialog-wrap{
        background-image: url("../../assets/img/HuaiNanImg/dialog_bg.png")!important;
        background-size: 100% 100%!important;
        background-color: transparent!important;
        height: 60%;
        .el-dialog__header{
            text-align: center;
            padding: 30px 0;
            .el-dialog__headerbtn{
              display: none;
            }
            .el-dialog__title{
              color: #2f80f5;
              font-size: 50px;
              letter-spacing: 2px;
              font-family: 'pmzd';
            }
        }
        .el-dialog__body{
            color: #fff;
        }

    }
    .el-dialog__footer{
        padding: 0
    }
    .dialog-footer{
      padding-top: 0;
      .el-button{
            border-radius: 0;
            padding: 10px 25px;
            background: transparent;
            border: 3px solid;
            border-color: #008FFD;
            color: #008FFD;
        }
        .el-button--primary{
            background: #008FFD;
            color: #fff;
        }
    }
    .el-pagination{
        .el-pager{
            li{
                background: transparent!important;
                border: 1px solid #fff!important;
                color: #fff!important;
                margin: 0!important;
                border-radius: 0!important;
            }
            li.active{
                background: #008FFD!important;
            }
        }
        .btn-prev, .btn-next{
            background: transparent!important;
            border: 1px solid #fff!important;
            color: #fff!important;
            border-radius: 0!important;
        }

    }
</style>
